

import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import Layout from '../../components/Layout';

const HomePage: React.FC = () => {
  const navigate = useNavigate();

  const handleCourseCardClick = (courseId: string) => {
    navigate(`/course-detail?courseId=${courseId}`);
  };

  const handleAnnouncementClick = () => {
    navigate('/messages');
  };

  return (
    <Layout title="学途 - 继续教育学习平台">
      <div className="min-h-screen">{/* 主内容区域 */}
        {/* 欢迎区域 */}
        <section className="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center">
              <h1 className="text-4xl font-bold mb-4">欢迎来到学途</h1>
              <p className="text-xl mb-8 opacity-90">专业的继续教育学习平台，助您实现职业发展目标</p>
              <div className="flex justify-center space-x-4">
                <Link to="/course-list" className="px-8 py-3 bg-white text-blue-600 rounded-lg font-medium hover:bg-gray-50 transition-colors">
                  探索课程
                </Link>
                <Link to="/register" className="px-8 py-3 border-2 border-white text-white rounded-lg font-medium hover:bg-white hover:text-blue-600 transition-colors">
                  立即注册
                </Link>
              </div>
            </div>
          </div>
        </section>

        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          {/* 快速入口区 */}
          <section className="mb-12">
            <h2 className="text-2xl font-bold text-gray-900 mb-6">快速入口</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <Link to="/enrolled-courses" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all">
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i className="fas fa-book-open text-blue-600 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">我的课程</h3>
                    <p className="text-gray-600 text-sm">查看已报名课程</p>
                  </div>
                </div>
              </Link>
              
              <Link to="/messages" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all">
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i className="fas fa-envelope text-green-600 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">站内信</h3>
                    <p className="text-gray-600 text-sm">查看通知消息</p>
                  </div>
                </div>
              </Link>
              
              <Link to="/course-list" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all">
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i className="fas fa-search text-purple-600 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">浏览课程</h3>
                    <p className="text-gray-600 text-sm">发现更多课程</p>
                  </div>
                </div>
              </Link>
              
              <Link to="/help-center" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all">
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <i className="fas fa-question-circle text-yellow-600 text-xl"></i>
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">帮助中心</h3>
                    <p className="text-gray-600 text-sm">获取使用帮助</p>
                  </div>
                </div>
              </Link>
            </div>
          </section>

          {/* 热门课程推荐 */}
          <section className="mb-12">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-gray-900">热门课程</h2>
              <Link to="/course-list" className="text-blue-600 hover:text-blue-700 font-medium">
                查看全部 <i className="fas fa-arrow-right ml-1"></i>
              </Link>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {/* 课程卡片1 */}
              <div 
                onClick={() => handleCourseCardClick('course1')}
                className="bg-white rounded-xl shadow-lg hover:shadow-xl overflow-hidden cursor-pointer transition-all"
              >
                <img src="https://s.coze.cn/image/jL16wazLRAA/" 
                     alt="Python编程基础课程封面" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <div className="flex items-center space-x-2 mb-2">
                    <span className="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">计算机</span>
                    <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">初级</span>
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">Python编程基础</h3>
                  <p className="text-gray-600 text-sm mb-4">从零开始学习Python编程，掌握基础语法和核心概念</p>
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center space-x-2">
                      <img src="https://s.coze.cn/image/9pPRq2_QBNk/" 
                           alt="李教授头像" className="w-6 h-6 rounded-full" />
                      <span className="text-gray-600 text-sm">李教授</span>
                    </div>
                    <span className="text-lg font-bold text-blue-600">¥299</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-1 text-gray-600 text-sm">
                      <i className="fas fa-users"></i>
                      <span>1,234人学习</span>
                    </div>
                    <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
                      立即报名
                    </button>
                  </div>
                </div>
              </div>

              {/* 课程卡片2 */}
              <div 
                onClick={() => handleCourseCardClick('course2')}
                className="bg-white rounded-xl shadow-lg hover:shadow-xl overflow-hidden cursor-pointer transition-all"
              >
                <img src="https://s.coze.cn/image/aH-jfwG-Wis/" 
                     alt="数据分析与可视化课程封面" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <div className="flex items-center space-x-2 mb-2">
                    <span className="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">数据科学</span>
                    <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">中级</span>
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">数据分析与可视化</h3>
                  <p className="text-gray-600 text-sm mb-4">学习数据分析方法，掌握数据可视化工具和技巧</p>
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center space-x-2">
                      <img src="https://s.coze.cn/image/faK2anHuQmU/" 
                           alt="王老师头像" className="w-6 h-6 rounded-full" />
                      <span className="text-gray-600 text-sm">王老师</span>
                    </div>
                    <span className="text-lg font-bold text-blue-600">¥399</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-1 text-gray-600 text-sm">
                      <i className="fas fa-users"></i>
                      <span>856人学习</span>
                    </div>
                    <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
                      立即报名
                    </button>
                  </div>
                </div>
              </div>

              {/* 课程卡片3 */}
              <div 
                onClick={() => handleCourseCardClick('course3')}
                className="bg-white rounded-xl shadow-lg hover:shadow-xl overflow-hidden cursor-pointer transition-all"
              >
                <img src="https://s.coze.cn/image/4l0MFefiVGo/" 
                     alt="项目管理实战课程封面" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <div className="flex items-center space-x-2 mb-2">
                    <span className="px-2 py-1 bg-purple-100 text-purple-600 text-xs rounded-full">管理</span>
                    <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">高级</span>
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">项目管理实战</h3>
                  <p className="text-gray-600 text-sm mb-4">掌握项目管理方法论，提升团队管理能力</p>
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center space-x-2">
                      <img src="https://s.coze.cn/image/MQTiCI4Sfzg/" 
                           alt="张经理头像" className="w-6 h-6 rounded-full" />
                      <span className="text-gray-600 text-sm">张经理</span>
                    </div>
                    <span className="text-lg font-bold text-blue-600">¥499</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-1 text-gray-600 text-sm">
                      <i className="fas fa-users"></i>
                      <span>623人学习</span>
                    </div>
                    <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
                      立即报名
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* 新课上线 */}
          <section className="mb-12">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-gray-900">新课上线</h2>
              <Link to="/course-list" className="text-blue-600 hover:text-blue-700 font-medium">
                查看全部 <i className="fas fa-arrow-right ml-1"></i>
              </Link>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {/* 新课卡片1 */}
              <div 
                onClick={() => handleCourseCardClick('course4')}
                className="bg-white rounded-xl shadow-lg hover:shadow-xl overflow-hidden cursor-pointer transition-all"
              >
                <div className="relative">
                  <img src="https://s.coze.cn/image/1Ca73IlQm8I/" 
                       alt="人工智能入门课程封面" className="w-full h-36 object-cover" />
                  <span className="absolute top-2 left-2 px-2 py-1 bg-red-500 text-white text-xs rounded-full">新课</span>
                </div>
                <div className="p-4">
                  <h3 className="font-semibold text-gray-900 mb-2 text-sm">人工智能入门</h3>
                  <p className="text-gray-600 text-xs mb-3">AI基础概念与应用</p>
                  <div className="flex items-center justify-between">
                    <span className="text-blue-600 font-bold">¥199</span>
                    <span className="text-gray-600 text-xs">刘博士</span>
                  </div>
                </div>
              </div>

              {/* 新课卡片2 */}
              <div 
                onClick={() => handleCourseCardClick('course5')}
                className="bg-white rounded-xl shadow-lg hover:shadow-xl overflow-hidden cursor-pointer transition-all"
              >
                <div className="relative">
                  <img src="https://s.coze.cn/image/4lkAcVtTZQU/" 
                       alt="数字营销课程封面" className="w-full h-36 object-cover" />
                  <span className="absolute top-2 left-2 px-2 py-1 bg-red-500 text-white text-xs rounded-full">新课</span>
                </div>
                <div className="p-4">
                  <h3 className="font-semibold text-gray-900 mb-2 text-sm">数字营销策略</h3>
                  <p className="text-gray-600 text-xs mb-3">现代营销方法与技巧</p>
                  <div className="flex items-center justify-between">
                    <span className="text-blue-600 font-bold">¥259</span>
                    <span className="text-gray-600 text-xs">陈老师</span>
                  </div>
                </div>
              </div>

              {/* 新课卡片3 */}
              <div 
                onClick={() => handleCourseCardClick('course6')}
                className="bg-white rounded-xl shadow-lg hover:shadow-xl overflow-hidden cursor-pointer transition-all"
              >
                <div className="relative">
                  <img src="https://s.coze.cn/image/AcUS3BFeboo/" 
                       alt="区块链技术课程封面" className="w-full h-36 object-cover" />
                  <span className="absolute top-2 left-2 px-2 py-1 bg-red-500 text-white text-xs rounded-full">新课</span>
                </div>
                <div className="p-4">
                  <h3 className="font-semibold text-gray-900 mb-2 text-sm">区块链技术基础</h3>
                  <p className="text-gray-600 text-xs mb-3">区块链原理与应用</p>
                  <div className="flex items-center justify-between">
                    <span className="text-blue-600 font-bold">¥359</span>
                    <span className="text-gray-600 text-xs">赵教授</span>
                  </div>
                </div>
              </div>

              {/* 新课卡片4 */}
              <div 
                onClick={() => handleCourseCardClick('course7')}
                className="bg-white rounded-xl shadow-lg hover:shadow-xl overflow-hidden cursor-pointer transition-all"
              >
                <div className="relative">
                  <img src="https://s.coze.cn/image/Y1NkenCJDzs/" 
                       alt="前端开发课程封面" className="w-full h-36 object-cover" />
                  <span className="absolute top-2 left-2 px-2 py-1 bg-red-500 text-white text-xs rounded-full">新课</span>
                </div>
                <div className="p-4">
                  <h3 className="font-semibold text-gray-900 mb-2 text-sm">React全栈开发</h3>
                  <p className="text-gray-600 text-xs mb-3">现代Web开发技术</p>
                  <div className="flex items-center justify-between">
                    <span className="text-blue-600 font-bold">¥429</span>
                    <span className="text-gray-600 text-xs">孙老师</span>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* 网站公告 */}
          <section className="mb-12">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-gray-900">最新公告</h2>
              <Link to="/messages" className="text-blue-600 hover:text-blue-700 font-medium">
                查看全部 <i className="fas fa-arrow-right ml-1"></i>
              </Link>
            </div>
            <div className="bg-white rounded-xl shadow-lg p-6">
              <div className="space-y-4">
                <div 
                  onClick={handleAnnouncementClick}
                  className="flex items-start space-x-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
                >
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2 flex-shrink-0"></div>
                  <div className="flex-1">
                    <h3 className="font-medium text-gray-900 mb-1">2024年春季学期课程报名开始</h3>
                    <p className="text-gray-600 text-sm mb-2">新的学期即将开始，欢迎各位同学报名参加我们的优质课程...</p>
                    <span className="text-gray-600 text-xs">2024-01-15</span>
                  </div>
                </div>
                
                <div 
                  onClick={handleAnnouncementClick}
                  className="flex items-start space-x-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
                >
                  <div className="w-2 h-2 bg-yellow-500 rounded-full mt-2 flex-shrink-0"></div>
                  <div className="flex-1">
                    <h3 className="font-medium text-gray-900 mb-1">系统维护通知</h3>
                    <p className="text-gray-600 text-sm mb-2">为了提供更好的服务体验，我们将于本周日进行系统维护...</p>
                    <span className="text-gray-600 text-xs">2024-01-12</span>
                  </div>
                </div>
                
                <div 
                  onClick={handleAnnouncementClick}
                  className="flex items-start space-x-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
                >
                  <div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
                  <div className="flex-1">
                    <h3 className="font-medium text-gray-900 mb-1">新增企业微信登录功能</h3>
                    <p className="text-gray-600 text-sm mb-2">为了方便用户登录，我们新增了企业微信扫码登录功能...</p>
                    <span className="text-gray-600 text-xs">2024-01-10</span>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        {/* 页脚 */}
      <footer className="bg-white border-t border-gray-200 py-12">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div>
                <h3 className="font-semibold text-gray-900 mb-4">关于学途</h3>
                <ul className="space-y-2 text-gray-600 text-sm">
                  <li><Link to="/about-us" className="hover:text-blue-600 transition-colors">公司简介</Link></li>
                  <li><a href="#" className="hover:text-blue-600 transition-colors">联系我们</a></li>
                  <li><a href="#" className="hover:text-blue-600 transition-colors">招聘信息</a></li>
                </ul>
              </div>
              
              <div>
                <h3 className="font-semibold text-gray-900 mb-4">帮助中心</h3>
                <ul className="space-y-2 text-gray-600 text-sm">
                  <li><Link to="/help-center" className="hover:text-blue-600 transition-colors">常见问题</Link></li>
                  <li><a href="#" className="hover:text-blue-600 transition-colors">使用指南</a></li>
                  <li><a href="#" className="hover:text-blue-600 transition-colors">意见反馈</a></li>
                </ul>
              </div>
              
              <div>
                <h3 className="font-semibold text-gray-900 mb-4">法律条款</h3>
                <ul className="space-y-2 text-gray-600 text-sm">
                  <li><Link to="/privacy-policy" className="hover:text-blue-600 transition-colors">隐私政策</Link></li>
                  <li><Link to="/user-agreement" className="hover:text-blue-600 transition-colors">用户协议</Link></li>
                  <li><a href="#" className="hover:text-blue-600 transition-colors">版权声明</a></li>
                </ul>
              </div>
              
              <div>
                <h3 className="font-semibold text-gray-900 mb-4">关注我们</h3>
                <div className="flex space-x-4">
                  <a href="#" className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition-colors">
                    <i className="fab fa-weixin"></i>
                  </a>
                  <a href="#" className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition-colors">
                    <i className="fab fa-weibo"></i>
                  </a>
                  <a href="#" className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition-colors">
                    <i className="fab fa-qq"></i>
                  </a>
                </div>
              </div>
            </div>
          
          <div className="border-t border-gray-200 mt-8 pt-8 text-center text-gray-600 text-sm">
            <p>&copy; 2024 学途教育科技有限公司. 保留所有权利.</p>
          </div>
        </div>
      </footer>
      </div>
    </Layout>
  );
};

export default HomePage;

